<script setup lang="ts">
  import { ref } from 'vue';
  import {
    getCabinetList,
    delectCabinet,
    getCabinetType,
    getCrdaList,
  } from '@/api/archives';
  import { TableInstance, Message } from '@arco-design/web-vue';
  // import Edit from './edit/index.vue';
  import Add from './add/index.vue';
  import { useUserStore } from '@/store';
  defineOptions({
    name: 'cabinetList',
  });
  const proTableRef = ref<TableInstance | null>(null);
  const userStore = useUserStore();
  const isEdit = ref(true);
  const visible1 = ref(false);
  const visible = ref(false);
  const editParam = ref();
  const title = ref();
  type OptionType = {
    value: string | number;
    label: string;
  };
  const typeOptions = ref<OptionType[] | null>(null);
  const roomOptions = ref<OptionType[] | null>(null);
  onMounted(() => {
    fetchTypeData();
    fetchRoomData();
  });
  //下拉框的数据获取
  const fetchTypeData = async () => {
    const data = await getCabinetType(null);
    const filteredData = data.data.list.map((item: any) => ({
      label: item.type_name,
      value: item.type_id,
    }));
    typeOptions.value = filteredData;
  };
  const fetchRoomData = async () => {
    const data = await getCrdaList(null);
    console.log('列表' + JSON.stringify(data.data.list));
    const filteredData = data.data.list.map((item: any) => ({
      label: item.room_name,
      value: item.room_id,
    }));
    roomOptions.value = filteredData;
  };
  // 搜索的表单类型
  const formType = ref([
    {
      name: 'cabinet_number',
      label: '档案柜编号',
      type: 'a-input',
      fieldProps: {
        span: 8,
        placeholder: '请输入',
      },
    },
    {
      name: 'cabinet_room_id',
      label: '所属档案室',
      type: 'a-select',
      fieldProps: {
        span: 8,
        placeholder: '请选择档案室',
      },
      selectOptions: roomOptions,
    },
    {
      label: '档案柜类型',
      name: 'cabinet_type_id',
      type: 'a-select',
      fieldProps: {
        span: 8,
        placeholder: '请选择类型',
      },
      selectOptions: typeOptions,
    },
    {
      name: 'cabinet_user_id',
      label: '管理员',
      type: 'a-select',
      fieldProps: {
        span: 8,
        allowSearch: true,
        fieldNames: { value: 'user_id', label: 'user_name' },
      },
      selectOptions: userStore.allUserInfo,
    },
  ]);

  //列表类型
  const tableType = [
    {
      dataIndex: 'cabinet_id',
      slotName: 'id',
    },
    {
      title: '编号',
      dataIndex: 'cabinet_number',
    },
    {
      title: '类型',
      dataIndex: 'cabinet_type_name',
    },
    {
      title: '位置',
      dataIndex: 'cabinet_address',
    },

    {
      title: '所属档案室',
      dataIndex: 'cabinet_room_name',
    },
    {
      title: '管理员',
      dataIndex: 'cabinet_user_name',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: [
        {
          name: '编辑',
          onClick: (record: any) => {
            // visible1.value = true;
            title.value = '编辑档案柜';
            visible.value = true;
            isEdit.value = true;
            editParam.value = record;
          },
        },
        {
          name: '删除',
          onClick: (record: any) => {
            delectCabinet({
              cabinet_ids: [record.cabinet_id],
            }).then((res) => {
              proTableRef.value?.setRefresh();
              Message.success('删除成功！');
            });
          },
        },
      ],
    },
  ];

  async function request(params) {
    const res = await getCabinetList(params);
    return {
      data: res.data,
    };
  }
</script>
<template>
  <div class="container">
    <pro-table
      ref="proTableRef"
      :formType="formType"
      title="档案室列表"
      :request="request"
      :tableType="tableType"
    >
      <template #btns>
        <a-button
          type="primary"
          @click="
            () => {
              isEdit = false;
              visible = true;
              editParam = 0;
              title = '添加档案柜';
            }
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          添加档案柜
        </a-button>
      </template>
      <template #options>
        <add
          v-if="visible"
          v-model:visible="visible"
          :isEdit="isEdit"
          :title="title"
          :editParam="editParam"
          @refresh="
            () => {
              $refs?.proTableRef?.setRefresh();
            }
          "
        />
      </template>
    </pro-table>
  </div>
</template>

<style scoped lang="less"></style>
